<template>
    <div>
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="height:600px;"></div>
        </div>
    </div>
</template>

<script>
    import * as echarts from "echarts";
    export default {
        data() {
            return {};
        },
        mounted() {
            this.getChart();
        },
        methods: {
            getChart() {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById("main"));

                // 指定图表的配置项和数据
                this.$ajax.get("/report/getSetmealReport").then((res) => {
                    myChart.setOption({
                        title : {
                            text: '套餐预约占比',
                            subtext: '',
                            x:'center'
                        },
                        tooltip : {//提示框组件
                            trigger: 'item',//触发类型，在饼形图中为item
                            formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: res.data.data.setmealNames
                        },
                        series : [
                            {
                                name: '套餐预约占比',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:res.data.data.setmealCounts,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                    this.$message.success(res.data.message);
                });
            },
        },
    }
</script>

<style scoped>

</style>
